<template>
  <div>
    <div class="Independent">
       <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in detaillist.imgArr" :key="index">
        <img :src="item" alt />
      </van-swipe-item>
    </van-swipe>
    <img src="../assets/image/detail-back.png"  class="pic-back" @click="goback" />
    <img src="../assets/image/detail-home.png"  class="pic-home" @click="gohome"/>
    <img src="../assets/image/detail-share.png"  class="pic-share" />
    <Sku />
    <SimilarGoods />
    </div>
    <Footer>
    </Footer>
  </div>
</template>

<script>
//详情页中间部分
import Sku from "../components/Detail/Sku";
//详情页大家都在看部分
import SimilarGoods from "../components/Detail/SimilarGoods"
//详情页底部
import Footer from "../components/Detail/footer";
import { getdetaillist } from "../utils/api";
export default {
  data() {
    return {};
  },
  components: {
    Sku,
    SimilarGoods,
    Footer,
  },
  mounted() {
    this.getdetaillist();
  },
  computed: {
    detaillist() {
      //详情页轮播图及下面信息
      return this.$store.state.detail.detaillist;
    },
  },
  methods: {
    async getdetaillist() {
      await this.$store.dispatch("detail/getdetaillist", {
        productId: this.$route.params.id,
      });
      console.log(this.detaillist);
    },
    goback(){
      this.$router.go(-1)
    },
    gohome(){
      this.$router.push('/home')
    }

  }
};
</script>

<style lang="stylus" scoped>
.Independent{
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 45px;
 overflow: auto;
  .my-swipe .van-swipe-item {
  width: 375px;
  height: 375px;
  color: #fff;
  font-size: 20px;
  line-height: 375px;
  text-align: center;
  background-color: #39a9ed;

  img {
    width: 100%;
    height: 100%;
  }
}

.pic-back {
  width: 27px;
  height: 27px;
  position: absolute;
  top: 46px;
  left: 15px;
}

.pic-home {
  width: 27px;
  height: 27px;
  position: absolute;
  top: 46px;
  left: 299px;
}

.pic-share {
  width: 27px;
  height: 27px;
  position: absolute;
  top: 46px;
  left: 331px;
}

}

</style>